import React from 'react';
import ReactDOM from 'react-dom';
const d3 = require("d3");

const historicDatesForSkiing = [
    {
        year: 1879,
        event: 'Ski Manufacturing Begins'
    },
    {
        year: 1882,
        event: 'US Ski Club Founded'
    },
    {
        year: 1924,
        event: 'First winter Olympics Held'
    },
    {
        year: 1926,
        event: 'First US Ski shop Opens'
    },
    {
        year: 1932,
        event: 'North America,s First Rope Tow Spins'
    },
    {
        year: 1936,
        event: 'First Chairlift Spins'
    },
    {
        year: 1949,
        event: 'Squaw Valley.Mad River Clen Open'
    },
    {
        year: 1958,
        event: 'First Gondla Spins'
    },
    {
        year: 1964,
        event: 'Plastiv Buckle Boots Available'
    }
];
const Canvas = ({children})=> <svg height="200" width="500">{children}</svg>;
const TimelineDot = ({position,txt})=><g transform={`translate(${position},0)`}><circle cy={160} r={5} style={{fill:'blue'}} /><text y={115} x={-95} transform="rotate(-45)" style={{fontSize:'10px'}} >{txt}</text></g>;
class Timeline extends React.Component{
    constructor({data = []}){
        const times = d3.extent(data.map(d => d.year));
        const range = [50,450];
        super({data});
        this.scale = d3.scaleTime().domain(times).range(range);
        this.state = {data,times,range};
    }
    
    /*
    componentDidMount() {
        let group;
        const  {data,times,range} = this.state;
        const {target} = this.refs;
        const scale = d3.scaleTime().domain(times).range(range);
        d3.select(target)
            .append('svg')
            .attr('height',200)
            .attr('width',800)
        
        group = d3.select(target.children[0])
        .selectAll('g')
        .data(data)
        .enter()
        .append('g')
        .attr(
            'transform',
            (d,i)=> 'translate('+scale(d.year)+',0)'
        )
        

        group.append('circle')
            .attr('cy',160)
            .attr('r',5)
            .style('fill','blue')


        group.append('text')
            .text(d=> d.year + '-' + d.event)
            .style('font-size',10)
            .attr('y',115)
            .attr('x',-100)
            .attr('transform','rotate(-45)')

    }
    */
    render() {
        const {data} = this.state;
        const {scale} = this;
        return (
            <div className="timeline">
                <h1>{this.props.name} Timeline</h1>
                <Canvas>
                    {data.map((d,i)=><TimelineDot 
                            position={scale(d.year)} 
                            key={i}
                            txt={`${d.year}-${d.event}`} 
                        />
                    )}
                </Canvas>
            </div>
        )
    }
}
ReactDOM.render(
    <Timeline name="History Of Skiing" data={historicDatesForSkiing} />,
    document.getElementById('root'));